<template>
  <Dialog v-model="dialogVisible" title="测试发送">
    <el-form
      ref="formRef"
      v-loading="formLoading"
      :model="formData"
      :rules="formRules"
      :validate-on-rule-change="false"
      label-width="140px"
    >
      <el-form-item label="模板内容" prop="content">
        <el-input
          v-model="formData.content"
          placeholder="请输入模板内容"
          readonly
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="formData.mobile" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item
        v-for="param in formData.params"
        :key="param"
        :label="`参数 {${param}}`"
        :prop="'templateParams.' + param"
      >
        <el-input v-model="formData.templateParams[param]" :placeholder="`请输入${param}参数`" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { SmsTemplateApi, SmsTemplateSendVO } from '@/api/system/sms/sms_template'

defineOptions({ name: 'SystemSmsTemplateSendForm' })

const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用

// 发送短信表单相关
const formData = ref({
  content: undefined,
  params: [],
  mobile: undefined,
  templateCode: undefined,
  templateParams: new Map()
})
const formRules = reactive({
  mobile: [{ required: true, message: '手机不能为空', trigger: 'blur' }],
  templateCode: [{ required: true, message: '模版编码不能为空', trigger: 'blur' }],
  templateParams: {}
})
const formRef = ref() // 表单 Ref

const open = async (id: number) => {
  dialogVisible.value = true
  resetForm()
  formLoading.value = true
  try {
    const data = await SmsTemplateApi.getSmsTemplate(id)
    formData.value.content = data.content
    formData.value.params = data.params
    formData.value.templateCode = data.code
    // 动态构造模版参数对象
    formData.value.templateParams = data.params.reduce((acc, item) => {
      acc[item] = ''
      return acc
    }, {})
    // 动态构造模版参数规则对象，动态变更规则会导致表单规则被提前执行，需要重置校验结果，否则弹窗一打开就已经有表单校验结果提示信息了
    formRules.templateParams = data.params.reduce((acc, item) => {
      acc[item] = [{ required: true, message: `参数${item}不能为空`, trigger: 'blur' }]
      return acc
    }, {})
  } finally {
    formLoading.value = false
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const submitForm = async () => {
  if (await formValidate(formRef)) return
  formLoading.value = true
  try {
    const data = formData.value as unknown as SmsTemplateSendVO
    const logId = await SmsTemplateApi.sendSmsTemplate(data)
    if (logId) {
      message.success('发送请求提交成功，发送日志编号：' + logId)
    }
    dialogVisible.value = false
  } finally {
    formLoading.value = false
  }
}

const resetForm = () => {
  formData.value = {
    content: undefined,
    params: [],
    mobile: undefined,
    templateCode: undefined,
    templateParams: new Map()
  }
  formRef.value?.resetFields()
}
</script>

<style scoped lang="scss"></style>
